<template>
  <div class="shop">
    <div class="search">
      
      <input type="text" placeholder="搜索" v-model="searchText" @confirm="search('init')">
      <span class="search-icon" @click="search('init')"></span>
    </div>
    <!-- <button class="publish-goods">发布商品</button> -->
    <div class="goods">
      <shop-tabbar @dragSelect="getSelect"/>
      <div class="goods-list">
        <div 
        class="goods-inner"
         @click="toGoodsDetail(item)"
          v-for="(item,index) of goodsList"
          :key="index"
          >
          <img :src="item.thumb_Url" alt="" mode="widthFill" class="thumb_img">
          <div class="goods-info">
            <div class="goods-name">{{item.name}}</div>
            <div class="goods-price">￥{{item.s_price}}</div>
            <div class="goods-price" v-if="userInfo.user_vip.is_vip!=0">会员价：￥{{item.vip_price}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import shopTabbar from '@/components/shopTabbar';
import {mapState} from 'vuex';
export default {
  name:'shop',
  data() {
    return {
      page:0,
      goodsList:[],//商品列
      searchText:'',//搜索的内容
      searchFlag:'',//区分是否是搜索状态的商品
      sort_type:''//排序分享
    }
  },
  components:{
    shopTabbar
  },
  computed: {
    ...mapState(['userInfo'])
  },
  watch: {
    searchText(nval){
      if(nval){
        this.searchFlag=true
      }else{
        this.searchFlag=false
        this.goodsList=[];//清除搜索的数据
        this.getGoodsList()
      }
    }
  },
  methods: {
    toGoodsDetail(item){
      //跳转商品详情
      this.$currency.navigateTo(`/pages/shopMain/goodsDetail/main?id=${item.id}`)
    },
    async getGoodsList(){
      //获取商品列表
      wx.showLoading({title: '加载中'})
      const res=await this.$api.getGoodsList({
        // limit:10,
        page:this.page,
        sort_type:this.sort_type
      })
      wx.hideLoading()
      if(res.data.level=='success' ){
        if(res.data.data.length>0){
          const data=this.goodsList;
          this.goodsList=[...data,...res.data.data]
        }else{
          this.page=this.page-1
        }
        
      }
      setTimeout(()=>{
        wx.stopPullDownRefresh()
      },500)
    },
    async search(type){
      if(type=='init'){
        this.goodsList=[];
      }
      //获取搜索的商品列表
      wx.showLoading({title: '加载中'})
      const res=await this.$api.getGoodsList({
        // limit:10,
        page:this.page,
        goods_name:this.searchText,
        sort_type:this.sort_type
      })
      wx.hideLoading()
      if(res.data.level=='success' ){
        if(res.data.data.length>0){
          const data=this.goodsList;
          this.goodsList=[...data,...res.data.data]
        }else{
          this.page=this.page-1
        }
        
      }
      setTimeout(()=>{
        wx.stopPullDownRefresh()
      },500)
    },
    getSelect(e){
      //获取排序项目
      const name=e.name;
      switch(name){
        case '综合':this.sort_type='';break;
        case '价格降序':this.sort_type='price_desc';break;
        case '价格升序':this.sort_type='price_asc';break;
        case '销量':this.sort_type='sale_desc';break;
      }
      this.page=0;
      this.goodsList=[];
      if(this.searchFlag){
          this.search()
        }else{
          this.getGoodsList();
        }
    }

  },
  onReachBottom(){
    this.page++;
    if(this.searchFlag){
      this.search()
    }else{
      this.getGoodsList();
    }
    
  },
  onPullDownRefresh() {
    this.page=0;
    this.goodsList=[];
    if(this.searchFlag){
      this.search()
    }else{
      this.getGoodsList();
    }
  },
  onLoad(){
    this.getGoodsList()
  },
  onPullDownRefresh () {
    this.getGoodsList()
  },
}
</script>

<style lang="scss" scoped>
  .shop{
    width: 100%;
    padding: 0 20rpx;
    .search{
          margin:20px auto;
          width: 580rpx;
          position: relative;
          background-color: #eee;
          box-sizing: border-box;
          padding-left: 54rpx;
          border-radius: 25rpx;
          height: 50rpx;
          font-size: 15px;
          line-height: 50rpx;
          color: #cccccc;
          .search-icon{
            position: absolute;
            left: 8rpx;
            top: 0;
            width: 50rpx;
            height: 50rpx;
            background-image: url(../../../../static/images/magnifier.png);
            background-position: center center;
            background-size: 50rpx 50rpx;
          }
        }
    .publish-goods{
      background-color: rgb(230, 59, 59);
      height: 70rpx;
      line-height: 70rpx;
      color: #ffffff;
      font-weight: 400;
      margin-top:20rpx;
    }
    .goods{
      .goods-sort{
        width: 100%;
        height: 70rpx;
        line-height: 70rpx;
        display: flex;
        font-size: 28rpx;
        div{
          flex: 1;
        }
        .goods-sort-sales{
          text-align: center;
        }
        .goods-sort-price{
          text-align: right;
        }
        .active{
          color: red;
        }
      }
      .goods-list{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        .goods-inner{
          width: 346rpx;
          margin-bottom: 10rpx;
          img{
            width: 100%;
            height: 250rpx;
          }
          .goods-name{
            width: 100%;
            font-size: 32rpx;
            height: 60rpx;
            line-height: 60rpx;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
          .goods-price{
            font-size: 28rpx;
            height: 40rpx;
            line-height: 40rpx;
            color: rgb(230, 59, 59);
            font-weight: 600;
          }
        }
      }
    }
    
  }
</style>